<template>
  <div class="balance-wrapper">
    <div class="user-com-title" style="margin: 10px 0; font-weight: 700;font-size: 24px;color: #333;">{{$t('page.index.title')}}</div>
    <div class="balance-box">
      <div class="flex">
        <div class="money-box" v-if="$auth.user">
          <div class="count-item">
             <div class="">
               <span style="font-size: 18px; color: #f89900;">{{baseData.sum || 0}}</span>
               <p style="font-size: 12px; color: #000;">{{$t('page.index.commission')}}</p>
             </div>
          </div>
          <div class="count-item">
             <div class="">
               <span style="font-size: 18px; color: #f89900;">{{baseData.fenxiao_code || 0}}</span>
               <p style="font-size: 12px; color: #000;">{{$t('page.index.distributionCode')}}</p>
             </div>
          </div>
          <div class="count-item">
             <div class="">
               <span style="font-size: 18px; color: #f89900;">{{promotionNum || 0}}</span>
               <p style="font-size: 12px; color: #000;">{{$t('page.index.promotionNum')}}</p>
             </div>
          </div>
          <div class="count-item">
             <div class="">
               <span style="font-size: 18px; color: #f89900;">{{promotionOrderNum || 0}}</span>
               <p style="font-size: 12px; color: #000;">{{$t('page.index.promotionOrderNum')}}</p>
             </div>
          </div>
          <!-- <div class="money-item">
            <span>{{$t('page.distribution.commission')}}</span>
            <p>{{baseData.sum || 0}}</p>
          </div> -->
          <!-- <div class="money-item">
            <span>{{$t('page.distribution.distributionCode')}}</span>
            <p>{{baseData.fenxiao_code || 0}}</p>
          </div> -->
          <!-- <div class="money-item">
            <span>{{$t('page.distribution.promotionNum')}}</span>
            <p>{{promotionNum || 0}}</p>
          </div> -->
          <!-- <div class="money-item">
            <span>{{$t('page.distribution.promotionOrderNum')}}($)</span>
            <p>{{promotionOrderNum || 0}}</p>
          </div> -->
        </div>
      </div>
      <div class="tab-box">
        <div class="hd clearfix">
          <div class="hd-item MyOrder" :class="{on:tabCur == item.key}" v-for="(item,index) in tabList" :key="index" @click="bindTab(item)">{{item.title}}</div>
        </div>
        <div v-if="tabCur === 0" class="order-list">
          <div class='nav acea-row' style="margin-top: 20px;">
            <div style="margin-right: 20px;" :class="grade == 0 ? 'item on MyOrder' : 'item MyOrder'" @click='setType(0)'>{{$t('page.index.level')}}({{list.one.length}})</div>
            <div  style="margin-right: 20px;" :class="grade == 1 ? 'item on MyOrder' : 'item MyOrder'" @click='setType(1)'>{{$t('page.index.level2')}}({{list.two.length}})</div>
            <div style="margin-right: 20px;" :class="grade == 2 ? 'item on MyOrder' : 'item MyOrder'" @click='setType(2)'>{{$t('page.index.level3')}}({{list.three.length}})</div>
          </div>

					<div v-for="(item,index) in recordList" :key="index" style="border-bottom: 1px solid #ccc; padding-bottom: 10px;"  class='item acea-row row-between-wrapper'>
						<div class="picTxt acea-row row-between-wrapper" style="margin-top: 20px;">
							<div class='pictrue'>
								<image :src='item.avatar ? item.avatar : "/static/images/f.png"'></image>
							</div>
							<div class='text'>
								<div class='name line1'>{{item.mer_name}}</div>
								<div>{{$t('page.index.joinTime')}}: {{item.create_time}}</div>
							</div>
						</div>
						<!-- <div class="right">
							<div><text class="num">{{item.fenxiao_num ? item.fenxiao_num : 0}}</text>{{$t('page.distribution.sheets')}}</div>
							<div><text class="num">{{item.fenxiao_sum ? item.fenxiao_sum : 0}}</text>$</div>
						</div> -->
					</div>
          <div class="emptyHit" v-if="recordList.length == 0">
            <span >{{$t('page.index.emptyHit')}}</span>
          </div>
        </div>
        <div v-else class="order-list">
          <div class='list' v-if="orderList.length>0">
              <div class='item' v-for="(item,index) in orderList" :key="index">
                <div class='listn'>
                    <div class='itenm'>
                      <div class='top acea-row row-between-wrapper' style="margin-top: 20px;">
                        <div class='pictxt acea-row row-between-wrapper'>
                          <div class='pictrue'>
                            <!-- <image v-if="item.avatar" :src='item.user.avatar'></image> -->
                            <image class="avatar" src="/static/images/f.png"></image>
                          </div>
                          <div class='text line1'>{{item.nickname}}</div>
                        </div>
                        <div class='money'>{{$t('page.distribution.Rebate')}}：${{item.number}}</div>
                      </div>
                      <div class='bottom'>
                        <div><text class='name'>{{$t('page.distribution.rechargeMoney')}}：</text>${{item.price}}</div>
                        <div><text class='name'>{{$t('page.distribution.OrderNo')}}</text>{{item.order_id}}</div>
                        <div><text class='name'>{{$t('page.distribution.addTime')}}</text>{{item.create_time}}</div>
                      </div>
                    </div>
                </div>
              </div>
          </div>
          <div class="emptyHit" v-if="orderList.length == 0">
            <!-- <span >{{$t('page.distribution.emptyHit')}}</span> -->
          </div>
        </div>
      </div>

    </div>
    <!-- <div class="empty-box" v-if="total == 0">
      <img src="~/assets/images/noyue.png" alt="">
      <p>{{$t('page.index.empty')}}</p>
    </div> -->
  </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------

  export default {
    name: "balance",
    auth: "guest",
    data(){
      return {
        tabCur:0,
        baseData:'',
        tabList:[
          {
            title:this.$t('page.index.promotionStat'),
            key:0
          },
          {
            title:this.$t('page.index.promotionOrderList'),
            key:1
          }
        ],

      	menus: [],
        promotionNum:0,
        promotionOrderNum:0,
        list:{
					one:[],
					two:[],
					three:[]
				},
        grade:0,
        recordList:[],
        orderList:[],
        userInfo:{},
      }
    },
    fetch({ store }) {
      store.commit("isBanner", false);
      store.commit("isHeader", true);
      store.commit("isFooter", true);
    },
    async beforeMount() {
      await this.getUserInfo();
      this.getBaseData()
      this.getDistributionList()
      this.getDistributionOrder()

    },
    methods:{
      getBaseData(){
        this.$axios.get('/api/user/distribution/'+this.userInfo.uid).then(res=>{
          this.baseData  = res.data
        })
      },
      getDistributionList() {
        this.$axios.post('/api/user/getdistributionlist',{uid:this.userInfo.uid}).then(res=>{
          this.list  = res.data
          this.promotionNum = this.list.one.length +   this.list.two.length +  this.list.three.length
          this.recordList = this.list.one
        })
      },
      getDistributionOrder() {
        this.$axios.post("/api/user/getdistributionorder",{uid:this.userInfo.uid}).then(res=>{
          this.orderList = res.data.list
          this.promotionOrderNum = this.orderList.length
        })
      },
      async getUserInfo() {
        await this.$axios.get("/api/user").then(res=>{
          this.userInfo = res.data;
        })
      },
      setType(grade){
				if (this.grade != grade) {
					switch (grade){
						case 0:
						this.recordList = this.list.one
						break
						case 1:
						this.recordList = this.list.two
						break;
						case 2:
						this.recordList = this.list.three
						break
					}
				}
				this.grade = grade
			},
      async bindTab(item) {
        this.tabCur= item.key;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .count-item{
    width: 220px;
        height: 83px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fafafa;
        text-align: center;
        margin-bottom: 20px;
        border: 1px solid #eeeeee;
        cursor: pointer;
        margin-right: 12px;
        // box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.25);
  }
  .MyOrder{
      height: 35px;
      display: flex;
      align-items: center;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      padding: 0 20px;
      background-color: #eee;
      border-radius: 5px;
      color: #999;
    }
.ml-20{
  margin-left: 20px;
}
.user-com-title{position: relative;}
.user_recharge{
display: inline-block;
position: absolute;
float: right;
right: 20px;
color: blue;
cursor: pointer;
}
.user_reflect{
display: inline-block;
position: absolute;
float: right;
right: 80px;
color: blue;
cursor: pointer;
}
.balance-wrapper{
  .btn-box{
    padding: 10px;
    display: flex;
    align-items: center;
    .merchant_info{
      div{
        margin-right: 20px;
      }
      span{
        margin-right: 10px;
      }
    }
  }
.balance-box{
  // padding-top: 45px;
  .flex{
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    .level-item{
        width: calc(calc(100% - 60px) / 3);
        margin-right: 20px;
        margin-bottom: 20px;
        text-align: center;
        padding: 20px;
        font-size: 14px;
        color: #666666;
        border-radius: 10px;
        box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.25);
        >div{
          padding: 5px;
        }
        .icon{
          width: 50px;
          height: 50px;
        }
      }
  }
  .money-box{
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
      .money-item{
        display: inline-block;
        width: 25%;
        margin:0 0 50px;
        span{
          color: #969696;
          font-size: 14px;
        }
        p{
          margin-top: 10px;
          color: #282828;
          font-size: 32px;
        }
      }
  }
  .tab-box{
    padding-right: 54px;
    margin-top: 35px;
    .hd{
      padding-bottom: 15px;
      border-bottom: 1px solid #ECECEC;
      .hd-item{
        position: relative;
        float: left;
        padding: 0 10px;
        margin-right: 30px;
        text-align: center;
        font-size: 16px;
        color: #999;
        cursor: pointer;
        &.on{
          color: #fff;
          background-color: #f89900;
          // &:after{
          //   content: ' ';
          //   position: absolute;
          //   left: 0;
          //   bottom: -16px;
          //   width:100%;
          //   height: 2px;
          //   background: #f89900;
          // }
        }
      }
    }
    .bd{
      .bd-item{
        margin-top: 20px;
        .time{
          height: 36px;
          line-height: 36px;
          // background: #F4F4F4;
          color: #969696;
          font-size: 14px;
          padding: 0 10px;
          &.on{
            color: #fff;
            background: #f89900;
          }
        }
        .list li{
          position: relative;
          padding: 18px 10px;
          border-bottom: 1px dashed #D0D0D0;
          .txt{
            color: #282828;
            font-size: 16px;
          }
          .txt-time{
            margin-top: 10px;
            color: #969696;
            font-size: 14px;
          }
          .num{
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -8px;
            font-size: 16px;
            font-weight: bold;
            color: #f89900;
          }
          .green{
            color: #43B36D;
          }
        }
      }
    }
  }
}
}
.pages-box{
  padding-right: 54px;
  margin-top: 30px;
  text-align: right;
}

.order-list {
  .nav {
		background-color: #fff;
		height: 43px;
		line-height: 43px;
		font-size: 14px;
		color: #282828;
		// border-bottom: 1px solid #eee;
	}

	 .nav .item.on {
		// border-bottom: 5rpx solid #f89900;
    background: #f89900;
		color: #fff;
	}

  .list {
		margin-top: 6px;
	}

	 .list .sortNav {
		background-color: #fff;
		height:38px;
		border-bottom: 1px solid #eee;
		color: #333;
		font-size: 14px;
	}

	 .list .sortNav .sortItem {
		text-align: center;
		flex: 1;
	}

	 .list .sortNav .sortItem image {
		width: 12px;
		height: 12px;
		margin-left: 3px;
		vertical-align: -1px;
	}

	 .list .item {
		background-color: #fff;
		border-bottom: 1px solid #eee;
		height:76px;
		padding: 0 15px 0 10px;
		font-size: 12px;
		color: #666;
	}

	 .list .item .picTxt {
		width:220px;
	}

	 .list .item .picTxt .pictrue {
		width: 53px;
		height: 53px;
		border-radius: 50%;
	}

	.list .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 3rpx solid #fff;
		box-shadow: 0 0 5px #aaa;
		box-sizing: border-box;
	}

	 .list .item .picTxt .text {
		width: 151px;
		font-size: 12px;
		color: #666;
	}

	 .list .item .picTxt .text .name {
		font-size: 14px;
		color: #333;
		margin-bottom: 6px;
	}

	 .list .item .right {
		width:120px;
		text-align: right;
		font-size: 11px;
		color: #333;
	}

 .list .item .right .num{
		margin-right: 3px;
	}

}
    /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 2px;
    height: 2px;
  }

  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    width: 2px;
    height: 2px;
    background-color: #0003;
    border-radius: 10px;
    transition: all .2s ease-in-out;
  }
  .drawer-box{
    padding: 20px;

    .detail_item {
      font-size: 12px;
      margin: 10px 0;
      .t1 {
        display: inline-block;
        width: 75px;
        text-align: right;
        margin-right: 10px;
        color: rgb(93, 93, 93);
      }
      .t2 {
        color: rgb(93, 93, 93);
      }
    }
    .mb-10{
      margin-bottom: 10px;
    }
  }
  .icon-img{
    width: 20px;
    height: 20px;
  }
  .emptyHit{
    text-align: center;
    padding: 30px;
  }
</style>
